import React, { useMemo } from "react";
import "./index.less";
import { Icon } from "@/components/Icon";
import { deepMerge } from "@/utils";
import { isString } from "@/utils/is";
import { useTranslation } from "react-i18next";

interface BtnConfig {
	key: string;
	text?: string;
	icon?: React.ReactNode;
	disabled?: boolean;
}

interface PropsType {
	action?: Fn;
	btnList?: BtnConfig[] | string[];
}
export default function bottomBtn(props: PropsType) {
	const { t } = useTranslation();

	const configButtons: Recordable<any> = {
		call_next: {
			text: t("component.toolbar.call_next"),
			icon: React.createElement(Icon, {
				icon: "ant-design:phone-outlined",
				size: 21,
				color: "#0277D4"
			})
		},
		back: {
			text: t("component.toolbar.back"),
			icon: React.createElement(Icon, {
				icon: "ant-design:rollback-outlined",
				size: 21,
				color: "#0277D4"
			})
		},
		continue: {
			text: t("component.toolbar.continue"),
			icon: React.createElement(Icon, {
				icon: "ant-design:caret-right-filled",
				size: 21,
				color: "#0277D4"
			})
		},
		save: {
			text: t("component.toolbar.save"),
			icon: React.createElement(Icon, {
				icon: "ant-design:save-outlined",
				size: 21,
				color: "#0277D4"
			})
		},
		add: {
			text: t("component.toolbar.add"),
			icon: React.createElement(Icon, {
				icon: "ant-design:save-outlined",
				size: 21,
				color: "#0277D4"
			})
		},
		edit: {
			text: t("component.toolbar.edit"),
			icon: React.createElement(Icon, {
				icon: "ant-design:edit-filled",
				size: 21,
				color: "#0277D4"
			})
		},
		skip: {
			text: t("component.toolbar.skip"),
			icon: React.createElement(Icon, {
				icon: "ant-design:fast-forward-outlined",
				size: 21,
				color: "#0277D4"
			})
		},
		approval: {
			text: t("component.toolbar.approval"),
			icon: React.createElement(Icon, {
				icon: "ant-design:fast-forward-outlined",
				size: 21,
				color: "#0277D4"
			})
		},
		payment: {},
		print: {
			text: t("component.toolbar.print"),
			icon: React.createElement(Icon, {
				icon: "ant-design:printer-filled",
				size: 21,
				color: "#0277D4"
			})
		},
		print_results: {
			text: t("component.toolbar.print_results"),
			icon: React.createElement(Icon, {
				icon: "ant-design:printer-filled",
				size: 21,
				color: "#0277D4"
			})
		},
		next: {
			text: t("next"),
			icon: React.createElement(Icon, {
				icon: "ant-design:arrow-down-outlined",
				size: 21,
				color: "#0277D4"
			})
		},
		be_in_hospital: {
			text: t("be_in_hospital"),
			icon: React.createElement(Icon, {
				icon: "ant-design:medicine-box-outlined",
				size: 21,
				color: "#0277D4"
			})
		},
		prescribe: {
			text: t("prescribe"),
			icon: React.createElement(Icon, {
				icon: "ant-design:link-outlined",
				size: 21,
				color: "#0277D4"
			})
		},
		transfer: {
			text: t("component.toolbar.transfer"),
			icon: React.createElement(Icon, {
				icon: "ant-design:logout-outlined",
				size: 21,
				color: "#0277D4"
			})
		},
		search: {
			text: t("component.toolbar.search"),
			icon: React.createElement(Icon, {
				icon: "ant-design:file-search-outlined",
				size: 21,
				color: "#0277D4"
			})
		},
		end: {
			text: t("component.toolbar.end"),
			icon: React.createElement(Icon, {
				icon: "ant-design:close-circle-filled",
				size: 21,
				color: "#E41E1D"
			})
		},
		export: {
			text: t("component.toolbar.export"),
			icon: React.createElement(Icon, {
				icon: "ant-design:export-outlined",
				size: 21,
				color: "#E41E1D"
			})
		}
	};

	// way one: ["save"]
	// way two: [{key:"save",disabled:true}]
	const { btnList = [], action } = props;

	const isKeys = useMemo(() => {
		return btnList.every(ele => isString(ele));
	}, [btnList]);

	const getBtns: BtnConfig[] = useMemo(() => {
		return btnList && btnList.length
			? btnList.map((item: BtnConfig | string) => ({
					key: isKeys ? item : item?.key,
					...deepMerge(configButtons[isKeys ? item : item.key], isKeys ? { item } : item)
			  }))
			: [];
	}, [btnList]);

	const getItemClass = (item: any) => {
		return item.disabled ? "Toolbar-item Toolbar-item-disabled" : "Toolbar-item";
	};

	/** Function */

	const operateAction = ({ key, disabled }: { key: string; disabled: boolean }) => {
		if (disabled) return;
		action && action(key);
	};

	/** Render */

	const renderItem = () => {
		return getBtns.map((item: any) => {
			return (
				<div className={getItemClass(item)} key={item.key} onClick={() => operateAction(item)}>
					{item.icon}
					<div>{item.text}</div>
				</div>
			);
		});
	};

	return <div className="Toolbar">{renderItem()}</div>;
}
